// 导入全局样式变量和混合器
@import '@styles/variables.scss';
@import '@styles/mixins.scss';

// 消息容器
.message-container {
    display: flex;
    gap: 16px;
    padding-bottom: 32px;
    max-width: 100%;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    align-self: flex-start;
    justify-content: flex-start;

    &--user {
        align-self: flex-end;
        padding-left: 32px;
        justify-content: flex-end;
    }

    &--assistant {
        align-self: flex-start;
        padding-left: 0;
        justify-content: flex-start;
    }
}

// 消息头像
.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    order: 2;

    &--small {
        width: 24px;
        height: 24px;
        order: 0;
    }
}

// 消息内容
.message-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    max-width: 860px;
    width: 100%;
    position: relative;

    &--user {
        align-items: flex-end;
    }

    &--assistant {
        align-items: flex-start;
    }
}

// 消息头部
.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: $text-secondary;
    font-size: $font-size-xs;
}

// 消息气泡
.message-bubble {
    padding: 12px 16px;
    background: $primary-color;
    color: white;
    border-radius: 8px 2px 8px 8px;
    width: fit-content;
    max-width: 100%;
    word-wrap: break-word;
    line-height: $line-height-normal;
    position: relative;

    &--user {
        background: $primary-color;
        color: white;
        border-radius: 8px 2px 8px 8px;
    }

    &--assistant {
        background: $background-primary;
        color: $text-primary;
        border-radius: 2px 8px 8px 8px;
        box-shadow: $shadow-chat-area;
    }

    // 内容容器
    .formatted-text {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .think-block{
        border-radius: $border-radius-md;
    }
    // 段落样式
    p {
        margin: 0;
        white-space: pre-line;
    }

    // 表格样式
    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: $border-radius-lg;
        overflow: hidden;
        margin: 4px 0;
        background: $background-primary;
        border: 1px solid $border-color;
    }

    th {
        background: $background-secondary;
        color: $text-primary;
        font-weight: $font-weight-medium;
        text-align: left;
        padding: 12px 16px;
        border-right: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        white-space: nowrap;
    }

    td {
        padding: 12px 16px;
        border-right: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        color: $text-secondary;
        text-align: left;
    }

    // 移除最后一列的右边框
    th:last-child,
    td:last-child {
        border-right: none;
    }

    // 移除最后一行的底部边框
    tr:last-child td {
        border-bottom: none;
    }

    // 第一行的圆角
    tr:first-child th:first-child {
        border-top-left-radius: $border-radius-lg;
    }

    tr:first-child th:last-child {
        border-top-right-radius: $border-radius-lg;
    }

    // 最后一行的圆角
    tr:last-child td:first-child {
        border-bottom-left-radius: $border-radius-lg;
    }

    tr:last-child td:last-child {
        border-bottom-right-radius: $border-radius-lg;
    }

    // 数字和金额列右对齐
    td[data-type="number"],
    td[data-type="currency"],
    td:nth-last-child(1):not([data-type="text"]):not([data-type="date"]) {
        text-align: right;
    }

    // 文本和日期列左对齐
    td[data-type="text"],
    td[data-type="date"] {
        text-align: left;
    }

    // 表头可排序样式
    th {
        position: relative;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;

        &:hover {
            background: $background-tertiary;
        }
    }

    // 斑马纹
    tr:nth-child(even) {
        background: $background-secondary;
    }

    tr:hover {
        background: $background-tertiary;
    }

    // 标题样式
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 12px 0 4px 0;
        font-weight: $font-weight-semibold;

        &:first-child {
            margin-top: 0;
        }
    }

    // 列表样式
    ul,
    ol {
        margin: 8px 0;
        padding-left: 20px;

        li {
            margin: 2px 0;
        }
    }

    // 行内代码样式
    :not(pre)>code {
        background: $background-tertiary;
        padding: 2px 4px;
        border-radius: $border-radius-sm;
        font-family: $font-family-code;
        font-size: 0.9em;
        color: $text-primary;
    }

    // 代码块样式
    pre {
        margin: 8px 0;
        padding: 0;
        background: #1E1E1E;
        border-radius: $border-radius-lg;
        overflow: hidden;

        code {
            background: transparent;
            padding: 0;
            color: #d4d4d4;
            font-family: $font-family-code;
            font-size: $font-size-sm;
            line-height: $line-height-normal;
        }
    }
}

// 消息操作
.message-actions {

    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    // display: flex;
    // flex-direction: row;
    // align-items: center;
    // gap: 4px;
    // position: absolute;
    // right: 0;
    // bottom: -32px;
    // opacity: 0;
    // transition: opacity 0.2s ease;
    // z-index: 1;
    // padding: 4px;
    // background: #ffffff;
    // border-radius: 4px;
  
    // &:hover {
    //   opacity: 1;
    // }
}

.action-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.action-button {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: transparent;
    border-radius: $border-radius-sm;
    color: $text-tertiary;
    cursor: pointer;
    flex-shrink: 0;

    &:hover {
        background: rgba(0, 0, 0, 0.04);
        color: $text-primary;
    }

    i {
        font-size: 16px;
        line-height: 1;
    }
}

// 气泡操作
.bubble-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    position: absolute;
    right: 0;
    bottom: -32px;
    // opacity: 0;
    transition: opacity $transition-fast $easing-ease;
    z-index: 1;
    padding: 4px;
    background: $background-primary;
    border-radius: $border-radius-sm;

    // &:hover {
    //     opacity: 1;
    // }
}